import React, { memo, useState } from 'react'
import LoginWrapper from './style'
import classNames from 'classnames'

const Login = memo(() => {
  const [isRegister, setIsRegister] = useState(false)

  return (
    <LoginWrapper>
        <div className="container">
          <div className={classNames("form-box", {toRight: isRegister})}>
            { isRegister && (
              <div className="register-box">
                <h1>register</h1>
                <input type="text" placeholder="用户名" />
                <input type="email" placeholder="邮箱" />
                <input type="password" placeholder="密码" />
                <input type="password" placeholder="确认密码" />
                <button>注册</button>
              </div>
            ) }
            { !isRegister && (
              <div className="login-box">
                <h1>login</h1>
                <input type="text" placeholder="用户名" />
                <input type="password" placeholder="密码" />
                <button>登录</button>
              </div>
            ) }
          </div>
          <div className="con-box left">
              <h2>welcome</h2>
              <p>欢迎来到食尚乐谱</p>
              <p>快来看看你的<span>食谱</span>吧</p>
              <img src="/images/cat/1.png" alt="" />
              <p>已有帐号</p>
              <button id="login" onClick={() => setIsRegister(false)}>去登陆</button>
          </div>
          <div className="con-box right">
              <h2>welcome</h2>
              <p>欢迎来到食尚乐谱</p>
              <p>快来看看你的<span>食谱</span>吧</p>
              <img src="/images/cat/2.png" alt="" />
              <p>没有帐号</p>
              <button id="register" onClick={() => setIsRegister(true)}>去注册</button>
          </div>
        </div>
    </LoginWrapper>
  )
})

export default Login